<template>
	<view class="index">
		<view class="list">
			<view class="item" v-for="item,index in addresses" :key="index">
				<view class="name u-flex u-row-between">
					<text>{{item.name}}</text>
					<label class="radio">
						<radio :checked="item.is_default == 1" color="#ffc659"/><text>默认地址</text>
					</label>
				</view>
				<view class="address u-flex-col">
					<text class="mobile">{{item.mobile}}</text>
					<text class="address">
						{{item.province_name+item.city_name+item.area_name+item.address}}
					</text>
				</view>
				<view class="buttons u-flex u-row-right">
					<view 
						class="button" 
						@click="$Router.push({
							name: 'user.address-edit',
							params: item
							})"
					>
						<u-icon name="edit-pen-fill"></u-icon>
						<text>编辑</text>
					</view>
					<view class="button" @click="showModal(item)">
						<u-icon name="trash-fill"></u-icon>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty text="收货地址为空" :show="addresses.length == 0"></u-empty>
		<u-toast ref="Toast"></u-toast>
		<u-loadmore :status="loadStatus" v-show="addresses.length > 0"></u-loadmore>
		<u-modal 
			v-model="delModal" 
			:show-cancel-button="true" 
			content="是否删除？" 
			@confirm="delAddress"
		></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addresses: [],
				page: 1,
				loadStatus: 'loadmore',
				delModal: false,
				currentItem: {}
			};
		},
		methods: {
			loadAddress(){
				return this.$api.user.indexAddress({
					page: this.page
				})
				.then(res=>{
					if(res.code == 1 && res.data.last_page >= this.page){
						this.addresses = this.addresses.concat(res.data.data)
					}else{
						this.loadStatus = 'nomore'
					}
				})
			},
			showModal(item){
				this.currentItem = item
				this.delModal = true
			},
			delAddress(){
				this.$api.user.delAddress({
					id: this.currentItem.id
				})
				.then(res=>{
					if(res.code == 1){
						this.$refs.Toast.show({
							title: '删除成功',
							type: 'success',
							callback: ()=>{
								this.reload()
							}
						})
					}else{
						this.$refs.Toast.show({
							title: '删除失败',
							type: 'warning'
						})
					}
				})
			},
			nextPage(){
				if(this.loadStatus == 'nomore') return 
				this.page = this.page + 1
				this.loadAddress()
			},
			reload(){
				this.addresses = []
				this.page = 1
				this.loadStatus = 'loadmore'
				this.loadAddress()
			}
		},
		mounted() {
			this.loadAddress()
			uni.$on('refreshAddress',()=>{
				this.reload()
			})
		}
	}
</script>

<style lang="scss" scoped>
	.index{
		.list{
			.item{
				background-color: $uni-bg-color;
				padding: $uni-spacing-col-base $uni-spacing-row-base;
				margin-bottom: $uni-spacing-col-base;
				.name{
					padding: $uni-spacing-col-sm 0;
					text{
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
					.radio{
						radio{
							transform:scale(0.7);
						}
						text{
							font-size: $uni-font-size-base;
						}
					}
				}
				.buttons{
					.button{
						padding-left: $uni-spacing-row-sm;
						font-size: $uni-font-size-base;
						color: $uni-text-color-grey;
					}
				}
			}
		}
	}
</style>
